<template>
  <el-dialog
    :append-to-body="true"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="globalData.title"
    :visible.sync="isDialog.visible"
    top="5vh"
    width="750px"
  >
    <div class="header-box">
      <!-- 省市区-->
      <div>
        <el-select
          v-model="queryInfo.region_id"
          :loading="searchItem.region_id.loading"
          :remote-method="handleSearchRegion"
          clearable
          filterable
          placeholder="选择所在城市"
          remote
          reserve-keyword
          @change="handleResetPage"
        >
          <el-option
            v-for="item in searchItem.region_id.options"
            :key="item.region_id"
            :label="item.name"
            :value="item.region_id"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" @click="handleResetPage">
          搜索
          <i class="el-icon-search el-icon--right"></i>
        </el-button>
      </div>
      <div class="add">
        <el-button type="primary" @click="handleEdit"> 添加</el-button>
      </div>
    </div>

    <div class="flex-content">
      <el-table
        v-loading="isLoading.table"
        :data="dataList"
        header-cell-class-name="table-header"
        height="100%"
        stripe
        style="width: 100%"
      >
        <el-table-column align="center" label="关键词" prop="keywords">
        </el-table-column>

        <el-table-column align="center" label="地区" prop="region">
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template v-slot="{ row }">
            <el-button size="mini" type="danger" @click="handleDel(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 数权-->
    <Edit v-if="isDialog.edit" @close="closeDialog"></Edit>
  </el-dialog>
</template>

<script>
import { del, lists as getList } from "@/api/keywords";
import { lists as searchRegion } from "@/api/region";
import Edit from "./editKeywords.vue";

export default {
  name: "Keywords",
  components: {
    Edit,
  },
  data() {
    return {
      // 查询条件
      queryInfo: {
        region_id: "",
      },
      // 列表
      dataList: [],
      // 数据
      globalData: {
        title: "",
      },
      // 远程搜索项
      searchItem: {
        region_id: {
          loading: false,
          options: [],
        },
      },
      // 加载
      isLoading: {
        table: false,
      },
      // 防抖
      queryId: +new Date(),
      // 弹窗
      isDialog: {
        visible: true,
        edit: false,
      },
    };
  },
  created() {
    this.globalData.title = "关键词";
    this.getData();
    this.handleSearchRegion();
  },
  methods: {
    // 获取城市
    handleSearchRegion(query) {
      this.searchItem.region_id.loading = true;
      searchRegion({
        page: 1,
        rows: 10,
        keywords: query ? query : "",
      }).then((res) => {
        this.searchItem.region_id.loading = false;
        this.searchItem.region_id.options = res.data.list;
      });
    },
    // 数据
    getData() {
      this.isLoading.table = true;
      this.queryId++;
      let queryId = this.queryId;
      getList(this.queryInfo)
        .then((res) => {
          if (queryId !== this.queryId) {
            return;
          }
          this.dataList = res.data.list;
        })
        .finally(() => {
          this.isLoading.table = false;
        });
    },
    // 修改
    handleEdit() {
      this.isDialog.edit = true;
    },
    // 删除
    handleDel(row) {
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== "confirm") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
            close();
            return false;
          } else {
            ctx.confirmButtonLoading = true;
            del({
              id: row.id,
            })
              .then(() => {
                this.getData();
                close();
              })
              .finally(() => {
                ctx.confirmButtonLoading = false;
              });
          }
        },
      });
    },
    // 重置页面数据
    handleResetPage() {
      this.getData();
    },
    //关闭
    closeDialog(val) {
      if (!val) {
        this.getData();
      }
      this.isDialog.edit = false;
    },
    // 关闭
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  min-height: 60vh;
}

::v-deep .el-dialog__body {
  padding: 20px 20px;
}

.flex-content {
  margin-top: 10px;
}
</style>
